<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../c-asserts/sui/sui1.0.1.css"/>
    <link rel="stylesheet" type="text/css" href="../../c-asserts/mui/css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../../c-asserts/swiper/css/swiper.min.css" />
    <style type="text/css">
        html,body{
            width:100%;
            height:100%;
            background-color:#FFFFFF;
        }
        p{
            margin-bottom:0;
        }
        .hot-search{
            padding:10px 10px;
        }
        .mode-title{
            padding:0px 10px;
        }
        .swiper-slide{
            height:160px;
        }
        .swiper-pagination-bullet-active{
            background-color:#EB4F38;
        }
        .call-item{
            background-color:#efeff4;
            padding:8px 2px;
            color:#8f8f94;
            font-size:14px;
        }

        .hot-search{

        }
    </style>
</head>
<body>
   <div class="hot-search">
       <div><p class="mode-title">热门搜索</p></div>
       <div class="swiper-container">
           <div class="swiper-wrapper">
               <div class="swiper-slide">
                    <div class="sui-table-view">
                        <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">帝都</div></div>
                        <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">帝都</div></div>
                        <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">帝都</div></div>
                        <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">帝都</div></div>
                        <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">帝都</div></div>
                        <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">帝都</div></div>
                        <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">帝都</div></div>
                        <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">帝都</div></div>
                        <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">帝都</div></div>
                    </div>
               </div>
               <div class="swiper-slide">
                   <div class="sui-table-view">
                       <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">总店铺</div></div>
                       <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">总店铺</div></div>
                       <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">总店铺</div></div>
                       <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">总店铺</div></div>
                       <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">总店铺</div></div>
                       <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">总店铺</div></div>
                       <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">总店铺</div></div>
                       <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">总店铺</div></div>
                       <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">总店铺</div></div>
                   </div>
               </div>
               <div class="swiper-slide">
                   <div class="sui-table-view">
                       <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">长沙</div></div>
                       <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">长沙</div></div>
                       <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">长沙</div></div>
                       <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">长沙</div></div>
                       <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">长沙</div></div>
                       <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">长沙</div></div>
                       <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">长沙</div></div>
                       <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">长沙</div></div>
                       <div class="sui-table-view-cell sui-view-cell-4"><div class="call-item">长沙</div></div>
                   </div>
               </div>
           </div>
           <!-- Add Pagination -->
           <div class="swiper-pagination"></div>
       </div>
   </div>
   <!--<div class="history-lis">-->
        <!--<div><p>历史记录</p></div>-->
   <!--</div>-->
</body>
<script type="text/javascript" src="../../c-script/api.js"></script>
<script type="text/javascript" src="../../c-script/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="../../c-script/public.js"></script>
<script type="text/javascript" src="../../c-asserts/swiper/js/swiper.min.js"></script>
<script type="text/javascript">
    $(function(){

        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            loop:true
        });


        $('.sui-table-view-cell').on('click',function(){
            var name = $(this).find('.call-item').html();
            api.sendEvent({name:'setoption',extra:{type:'iname',name:name}});
            api.closeWin();
        });

    })
</script>
</html>